<template>
    <div class="silde_box">
        <slide-verify class="silde_box" :l="42" :r="10" :w="350" :h="175" ref="block" :slider-text="text"
            :accuracy="accuracy" @again="onAgain" :show="false" @success="onSuccess" @fail="onFail"></slide-verify>
        <!-- <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button> -->
        <!-- <div>{{ msg }}</div> -->
    </div>
</template>
   
<script lang="ts">
// import {
//     useI18n
// } from "vue-i18n";
// const {
//     t
// } = useI18n()
// imgs 图片数组
import { defineComponent, ref } from "vue";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css"
export default defineComponent({
    components: { SlideVerify },
    setup(props, context) {
        const msg = ref("");
        const block = ref<SlideVerifyInstance>();

        const onAgain = () => {
            msg.value = "检测到非人为操作的哦！ try again";
            // 刷新
            block.value?.refresh();
        };

        const onSuccess = (times: number) => {
            context.emit('update:setverify');
            msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
        };

        const onFail = () => {
            msg.value = "验证不通过";
        };

        const onRefresh = () => {
            msg.value = "点击了刷新小图标";
            block.value?.refresh();
        };

        const handleClick = () => {
            // 刷新
            block.value?.refresh();
            msg.value = "";
        };

        return {
            block,
            msg,
            text: '向右滑动',
            accuracy: 1,
            onAgain,
            onSuccess,
            onFail,
            onRefresh,
            handleClick,
        };
    },
});
</script>
<style scoped lang="less">
/deep/ .el-dialog__body {
    padding-top: 15px !important;
}

/deep/ .slide-verify-slider {
    margin: 0;
}

.silde_box {
    margin: 0 auto;
}
</style>